<template>
  <div>
    <el-card>
      <div data-v-08c18f7a data-v-3a20a40c class="acc_pass">
        <div data-v-08c18f7a class="acc_index_t">
          <h3 data-v-08c18f7a class="acc_t">
            <strong data-v-08c18f7a>修改密码</strong>
          </h3>
          <div class="Delimiter">&nbsp;</div>
        </div>
        <div data-v-08c18f7a class="acc_pass_con">
          <ul data-v-08c18f7a class="acc_pass_list">
            <!-- <li data-v-08c18f7a>
              <label data-v-08c18f7a>输入原密码：</label>
              <input
                data-v-08c18f7a
                id="confirmPwd"
                :type= 'oldPwdType'
                placeholder="输入原密码"
                autocomplete="off"
                oncopy="return false"
                class="inpt"
                v-model="oldPassword"
              />
              <span data-v-08c18f7a class="visible_icon" @click="oldPwd()">
                <svg t="1581211674717" class="icon" v-if="OldIsShow" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1352" width="32" height="32"><path d="M517.418667 229.290667a496.128 496.128 0 0 1 318.72 120.064L1024 510.634667c-64.085333 55.04-127.829333 110.378667-192.213333 165.034666a534.442667 534.442667 0 0 1-50.261334 37.077334c-27.989333 18.090667-57.813333 33.322667-88.832 45.397333a499.114667 499.114667 0 0 1-371.584-4.096 494.506667 494.506667 0 0 1-133.248-82.090667L0 510.634667C64.085333 455.637333 127.829333 400.256 192.213333 345.6c4.437333-3.626667 8.874667-7.253333 13.354667-10.794667 26.709333-20.650667 55.125333-38.826667 85.376-53.845333a497.237333 497.237333 0 0 1 226.474667-51.669333z m-10.154667 64a432.341333 432.341333 0 0 0-204.970667 53.973333c-26.026667 14.421333-50.261333 31.530667-72.874666 50.730667l-131.2 112.64c45.056 38.698667 89.898667 77.568 135.168 116.010666a447.232 447.232 0 0 0 47.914666 34.986667 433.493333 433.493333 0 0 0 513.28-38.357333l131.2-112.64c-45.056-38.656-89.898667-77.568-135.168-116.010667a444.416 444.416 0 0 0-86.016-56.32 434.133333 434.133333 0 0 0-197.333333-45.013333z" p-id="1353"></path><path d="M516.010667 356.864a155.776 155.776 0 0 1 66.602666 16.938667 156.672 156.672 0 0 1 67.584 67.584 154.410667 154.410667 0 0 1 15.189334 94.250666 155.434667 155.434667 0 0 1-213.76 119.338667 155.989333 155.989333 0 0 1-79.488-75.733333 153.6 153.6 0 0 1-13.525334-43.605334 154.410667 154.410667 0 0 1 15.189334-94.250666 156.672 156.672 0 0 1 67.584-67.584 155.776 155.776 0 0 1 66.602666-16.938667c4.010667-0.042667 4.010667-0.042667 8.021334 0z m-6.4 64c-13.610667 0.512-26.88 3.669333-39.04 9.898667a92.16 92.16 0 0 0-43.434667 47.829333 91.136 91.136 0 0 0-2.858667 58.368c7.296 25.6 26.026667 47.189333 50.261334 58.197333a91.306667 91.306667 0 0 0 127.189333-99.328 91.776 91.776 0 0 0-44.416-62.933333 92.373333 92.373333 0 0 0-47.701333-12.032z" p-id="1354"></path></svg>
                <svg t="1581211331047" class="icon" v-else viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1122" width="32" height="32"><path d="M941.677 391.71c9.338-14.006 6.225-32.681-6.225-43.575-14.006-10.894-32.681-7.781-43.575 6.225-1.557 1.556-174.3 205.426-379.728 205.426-199.2 0-379.727-205.426-381.283-206.982-10.895-12.45-31.125-14.006-43.576-3.113-12.45 10.894-14.006 31.125-3.113 43.576 3.113 4.668 40.463 46.687 99.6 93.375l-79.37 82.482c-12.45 12.45-10.893 32.681 1.557 43.575 3.113 6.225 10.894 9.338 18.676 9.338 7.78 0 15.562-3.113 21.787-9.338l85.594-88.706c40.463 28.013 88.707 54.47 141.62 73.144l-32.682 110.495c-4.668 17.118 4.67 34.237 21.788 38.906h9.337c14.006 0 26.457-9.338 29.569-23.344l32.681-110.495c24.9 4.669 51.357 7.782 77.813 7.782s52.913-3.113 77.814-7.782l32.68 108.939c3.114 14.006 17.12 23.343 29.57 23.343 3.113 0 6.225 0 7.782-1.556 17.118-4.67 26.456-21.787 21.788-38.906L649.099 595.58c52.914-18.676 101.157-45.132 141.62-73.144l84.038 87.15c6.225 6.225 14.006 9.338 21.787 9.338 7.781 0 15.563-3.113 21.787-9.337 12.45-12.451 12.45-31.125 1.557-43.576l-79.37-82.481c63.808-46.689 101.16-91.82 101.16-91.82z" p-id="1123" fill="#333333"></path></svg>
              </span>
            </li> -->
            <li data-v-08c18f7a>
              <label data-v-08c18f7a>输入新密码：</label>
              <input
                data-v-08c18f7a
                :type="NewPwdType"
                name="password"
                id="password"
                autocomplete="off"
                validate="true"
                data-rule="['password']"
                oncopy="return false"
                class="inpt"
                v-model="NewPassword"
              />
              <span
                data-v-08c18f7a
                for="icon-password"
                class="visible_icon"
                @click="NewPwd()"
              >
                <svg
                  t="1581211674717"
                  class="icon"
                  v-if="NewIsShow"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1352"
                  width="32"
                  height="32"
                >
                  <path
                    d="M517.418667 229.290667a496.128 496.128 0 0 1 318.72 120.064L1024 510.634667c-64.085333 55.04-127.829333 110.378667-192.213333 165.034666a534.442667 534.442667 0 0 1-50.261334 37.077334c-27.989333 18.090667-57.813333 33.322667-88.832 45.397333a499.114667 499.114667 0 0 1-371.584-4.096 494.506667 494.506667 0 0 1-133.248-82.090667L0 510.634667C64.085333 455.637333 127.829333 400.256 192.213333 345.6c4.437333-3.626667 8.874667-7.253333 13.354667-10.794667 26.709333-20.650667 55.125333-38.826667 85.376-53.845333a497.237333 497.237333 0 0 1 226.474667-51.669333z m-10.154667 64a432.341333 432.341333 0 0 0-204.970667 53.973333c-26.026667 14.421333-50.261333 31.530667-72.874666 50.730667l-131.2 112.64c45.056 38.698667 89.898667 77.568 135.168 116.010666a447.232 447.232 0 0 0 47.914666 34.986667 433.493333 433.493333 0 0 0 513.28-38.357333l131.2-112.64c-45.056-38.656-89.898667-77.568-135.168-116.010667a444.416 444.416 0 0 0-86.016-56.32 434.133333 434.133333 0 0 0-197.333333-45.013333z"
                    p-id="1353"
                  ></path>
                  <path
                    d="M516.010667 356.864a155.776 155.776 0 0 1 66.602666 16.938667 156.672 156.672 0 0 1 67.584 67.584 154.410667 154.410667 0 0 1 15.189334 94.250666 155.434667 155.434667 0 0 1-213.76 119.338667 155.989333 155.989333 0 0 1-79.488-75.733333 153.6 153.6 0 0 1-13.525334-43.605334 154.410667 154.410667 0 0 1 15.189334-94.250666 156.672 156.672 0 0 1 67.584-67.584 155.776 155.776 0 0 1 66.602666-16.938667c4.010667-0.042667 4.010667-0.042667 8.021334 0z m-6.4 64c-13.610667 0.512-26.88 3.669333-39.04 9.898667a92.16 92.16 0 0 0-43.434667 47.829333 91.136 91.136 0 0 0-2.858667 58.368c7.296 25.6 26.026667 47.189333 50.261334 58.197333a91.306667 91.306667 0 0 0 127.189333-99.328 91.776 91.776 0 0 0-44.416-62.933333 92.373333 92.373333 0 0 0-47.701333-12.032z"
                    p-id="1354"
                  ></path>
                </svg>
                <svg
                  t="1581211331047"
                  class="icon"
                  v-else
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1122"
                  width="32"
                  height="32"
                >
                  <path
                    d="M941.677 391.71c9.338-14.006 6.225-32.681-6.225-43.575-14.006-10.894-32.681-7.781-43.575 6.225-1.557 1.556-174.3 205.426-379.728 205.426-199.2 0-379.727-205.426-381.283-206.982-10.895-12.45-31.125-14.006-43.576-3.113-12.45 10.894-14.006 31.125-3.113 43.576 3.113 4.668 40.463 46.687 99.6 93.375l-79.37 82.482c-12.45 12.45-10.893 32.681 1.557 43.575 3.113 6.225 10.894 9.338 18.676 9.338 7.78 0 15.562-3.113 21.787-9.338l85.594-88.706c40.463 28.013 88.707 54.47 141.62 73.144l-32.682 110.495c-4.668 17.118 4.67 34.237 21.788 38.906h9.337c14.006 0 26.457-9.338 29.569-23.344l32.681-110.495c24.9 4.669 51.357 7.782 77.813 7.782s52.913-3.113 77.814-7.782l32.68 108.939c3.114 14.006 17.12 23.343 29.57 23.343 3.113 0 6.225 0 7.782-1.556 17.118-4.67 26.456-21.787 21.788-38.906L649.099 595.58c52.914-18.676 101.157-45.132 141.62-73.144l84.038 87.15c6.225 6.225 14.006 9.338 21.787 9.338 7.781 0 15.563-3.113 21.787-9.337 12.45-12.451 12.45-31.125 1.557-43.576l-79.37-82.481c63.808-46.689 101.16-91.82 101.16-91.82z"
                    p-id="1123"
                    fill="#333333"
                  ></path>
                </svg>
              </span>
              <svg
                t="1581489398196"
                v-if="NewPwdFlag"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1864"
                width="16"
                height="16"
              >
                <path
                  d="M874 150C674.1-50 349.9-50 150 150s-200 524.1 0 724 524.1 200 724 0 200-524.1 0-724z m-73.8 187.6L405.5 732.3s-0.1 0-0.1 0.1c0 0 0 0.1-0.1 0.1l-1 1c-12.2 12.2-32.1 12.2-44.3 0L223.3 596.7c-12.2-12.2-12.2-32.1 0-44.3l1-1c12.2-12.2 32.1-12.2 44.3 0l112.3 112.3L753.6 291c12.8-12.8 33.7-12.8 46.5 0 12.9 12.8 12.9 33.8 0.1 46.6z"
                  fill="#32CD32"
                  p-id="1865"
                ></path>
              </svg>
            </li>
            <li data-v-08c18f7a>
              <label data-v-08c18f7a>确认新密码：</label>
              <input
                data-v-08c18f7a
                id="confirmPwd"
                :type="SurePwdType"
                placeholder="请确认新密码"
                autocomplete="off"
                oncopy="return false"
                class="inpt"
                v-model="SurePassword"
                @blur="checkSurePassword"
              />
              <span data-v-08c18f7a class="visible_icon" @click="SurePwd()">
                <svg
                  t="1581211674717"
                  class="icon"
                  v-if="SureIsShow"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1352"
                  width="32"
                  height="32"
                >
                  <path
                    d="M517.418667 229.290667a496.128 496.128 0 0 1 318.72 120.064L1024 510.634667c-64.085333 55.04-127.829333 110.378667-192.213333 165.034666a534.442667 534.442667 0 0 1-50.261334 37.077334c-27.989333 18.090667-57.813333 33.322667-88.832 45.397333a499.114667 499.114667 0 0 1-371.584-4.096 494.506667 494.506667 0 0 1-133.248-82.090667L0 510.634667C64.085333 455.637333 127.829333 400.256 192.213333 345.6c4.437333-3.626667 8.874667-7.253333 13.354667-10.794667 26.709333-20.650667 55.125333-38.826667 85.376-53.845333a497.237333 497.237333 0 0 1 226.474667-51.669333z m-10.154667 64a432.341333 432.341333 0 0 0-204.970667 53.973333c-26.026667 14.421333-50.261333 31.530667-72.874666 50.730667l-131.2 112.64c45.056 38.698667 89.898667 77.568 135.168 116.010666a447.232 447.232 0 0 0 47.914666 34.986667 433.493333 433.493333 0 0 0 513.28-38.357333l131.2-112.64c-45.056-38.656-89.898667-77.568-135.168-116.010667a444.416 444.416 0 0 0-86.016-56.32 434.133333 434.133333 0 0 0-197.333333-45.013333z"
                    p-id="1353"
                  ></path>
                  <path
                    d="M516.010667 356.864a155.776 155.776 0 0 1 66.602666 16.938667 156.672 156.672 0 0 1 67.584 67.584 154.410667 154.410667 0 0 1 15.189334 94.250666 155.434667 155.434667 0 0 1-213.76 119.338667 155.989333 155.989333 0 0 1-79.488-75.733333 153.6 153.6 0 0 1-13.525334-43.605334 154.410667 154.410667 0 0 1 15.189334-94.250666 156.672 156.672 0 0 1 67.584-67.584 155.776 155.776 0 0 1 66.602666-16.938667c4.010667-0.042667 4.010667-0.042667 8.021334 0z m-6.4 64c-13.610667 0.512-26.88 3.669333-39.04 9.898667a92.16 92.16 0 0 0-43.434667 47.829333 91.136 91.136 0 0 0-2.858667 58.368c7.296 25.6 26.026667 47.189333 50.261334 58.197333a91.306667 91.306667 0 0 0 127.189333-99.328 91.776 91.776 0 0 0-44.416-62.933333 92.373333 92.373333 0 0 0-47.701333-12.032z"
                    p-id="1354"
                  ></path>
                </svg>
                <svg
                  t="1581211331047"
                  class="icon"
                  v-else
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="1122"
                  width="32"
                  height="32"
                >
                  <path
                    d="M941.677 391.71c9.338-14.006 6.225-32.681-6.225-43.575-14.006-10.894-32.681-7.781-43.575 6.225-1.557 1.556-174.3 205.426-379.728 205.426-199.2 0-379.727-205.426-381.283-206.982-10.895-12.45-31.125-14.006-43.576-3.113-12.45 10.894-14.006 31.125-3.113 43.576 3.113 4.668 40.463 46.687 99.6 93.375l-79.37 82.482c-12.45 12.45-10.893 32.681 1.557 43.575 3.113 6.225 10.894 9.338 18.676 9.338 7.78 0 15.562-3.113 21.787-9.338l85.594-88.706c40.463 28.013 88.707 54.47 141.62 73.144l-32.682 110.495c-4.668 17.118 4.67 34.237 21.788 38.906h9.337c14.006 0 26.457-9.338 29.569-23.344l32.681-110.495c24.9 4.669 51.357 7.782 77.813 7.782s52.913-3.113 77.814-7.782l32.68 108.939c3.114 14.006 17.12 23.343 29.57 23.343 3.113 0 6.225 0 7.782-1.556 17.118-4.67 26.456-21.787 21.788-38.906L649.099 595.58c52.914-18.676 101.157-45.132 141.62-73.144l84.038 87.15c6.225 6.225 14.006 9.338 21.787 9.338 7.781 0 15.563-3.113 21.787-9.337 12.45-12.451 12.45-31.125 1.557-43.576l-79.37-82.481c63.808-46.689 101.16-91.82 101.16-91.82z"
                    p-id="1123"
                    fill="#333333"
                  ></path>
                </svg>
              </span>
              <svg
                t="1581489398196"
                v-if="SurePwdFlag"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="1864"
                width="16"
                height="16"
              >
                <path
                  d="M874 150C674.1-50 349.9-50 150 150s-200 524.1 0 724 524.1 200 724 0 200-524.1 0-724z m-73.8 187.6L405.5 732.3s-0.1 0-0.1 0.1c0 0 0 0.1-0.1 0.1l-1 1c-12.2 12.2-32.1 12.2-44.3 0L223.3 596.7c-12.2-12.2-12.2-32.1 0-44.3l1-1c12.2-12.2 32.1-12.2 44.3 0l112.3 112.3L753.6 291c12.8-12.8 33.7-12.8 46.5 0 12.9 12.8 12.9 33.8 0.1 46.6z"
                  fill="#32CD32"
                  p-id="1865"
                ></path>
              </svg>
              <svg
                t="1581490222399"
                v-if="Warning"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2040"
                width="16"
                height="16"
              >
                <path
                  d="M512 56.888889C261.688889 56.888889 56.888889 261.688889 56.888889 512s204.8 455.111111 455.111111 455.111111 455.111111-204.8 455.111111-455.111111-204.8-455.111111-455.111111-455.111111m0 853.333333c-221.866667 0-398.222222-176.355556-398.222222-398.222222s176.355556-398.222222 398.222222-398.222222 398.222222 176.355556 398.222222 398.222222-176.355556 398.222222-398.222222 398.222222"
                  fill="#FF4500"
                  p-id="2041"
                ></path>
                <path
                  d="M684.942222 725.048889L302.705778 342.926222l40.220444-40.220444 382.179556 382.122666z"
                  fill="#FF4500"
                  p-id="2042"
                ></path>
                <path
                  d="M298.837333 684.942222l382.122667-382.179555 40.220444 40.220444-382.122666 382.179556z"
                  fill="#FF4500"
                  p-id="2043"
                ></path>
              </svg>
            </li>
            <li data-v-08c18f7a class="error_tips hide"></li>
            <li data-v-08c18f7a class="acc_pass_b" style="text-align: center">
              <el-button
                :disabled="disabled"
                class="confirm_btn confirm_disable"
                @click="submit"
                >确定</el-button
              >
            </li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import webservice from "../../utils/webservice";
export default {
  data() {
    return {
      oldPwdType: "password" /* 原密码的输入类型 */,
      OldIsShow: false /* 原密码小眼睛的显示与隐藏 */,

      NewPwdType: "password" /* 新密码的输入类型 */,
      NewPassword: "" /* 新密码的v-model */,
      NewIsShow: false /* 新密码小眼睛的显示与隐藏 */,
      NewPwdFlag: false,

      SurePwdType: "password" /* 确认密码的输入类型 */,
      SurePassword: "" /* 确认密码的v-model */,
      SureIsShow: false /* 确认密码小眼睛的显示与隐藏 */,
      SurePwdFlag: false,

      disabled: false,
      Warning: false,
      userId: "", //登录者的id
    };
  },
  created() {
    if (window.sessionStorage.getItem("userInfo")) {
      this.userId = JSON.parse(window.sessionStorage.getItem("userInfo")).id;
    }
  },
  methods: {
    // oldPwd(){               /* 原密码 */
    //     this.oldPwdType = this.oldPwdType === 'password' ? 'text' : 'password';
    //     this.OldIsShow = this.OldIsShow === true? false: true
    //     // console.log(this.OldIsShow)
    // },
    NewPwd() {
      /* 新密码 */
      this.NewPwdType = this.NewPwdType === "password" ? "text" : "password";
      this.NewIsShow = this.NewIsShow === true ? false : true;
      // console.log(this.NewIsShow)
    },
    SurePwd() {
      /* 确认密码 */
      this.SurePwdType = this.SurePwdType === "password" ? "text" : "password";
      this.SureIsShow = this.SureIsShow === true ? false : true;
      // console.log(this.SureIsShow)
    },
    //校验输入的新密码是否不小于6位
    // checkNewPassword() {
    //   if (this.NewPassword.length >= 6) {
    //     this.NewPwdFlag = true;
    //   } else {
    //     this.NewPwdFlag = false;
    //   }
    // },
    //校验确认密码是否正确
    checkSurePassword() {
      if (
        this.SurePassword === this.NewPassword
      ) {
        this.SurePwdFlag = true;
        this.Warning = false;
        this.disabled = false;
      }else if (this.SurePassword !== this.NewPassword) {
        this.$message.error("两次输入的密码不一致 ！");
      } else {
        this.SurePwdFlag = false;
        this.Warning = true;
        this.disabled = true;
      }
    },
    submit() {
      /* 提交 */
      this.disabled = true;
      if (this.NewPassword === this.SurePassword) {
        let params = {
          id: this.userId,
          password: this.NewPassword,
        };
        webservice.HttpPost("api/user/updatePassword", params, (data) => {
          if (data.code === 200) {
            this.dialogFormVisible = false;
            this.$message.success("修改成功，请返回登录页重新登录！");
            this.$router.push("/login");
          } else {
            this.$message(data.data.message);
          }
        });
      } else {
        this.open();
        this.disabled = false;
      }
    },
    open() {
      this.$message.error("两次输入的密码不一致 ！");
    },
  },
};
</script>
<style>
.acc_index_t .Delimiter {
  border-bottom: 1px #ccc solid;
}
.acc_pass_con {
  padding: 28px 0 30px;
}
.acc_pass_list {
  width: 360px;
  margin: 0 auto;
  list-style: none;
}
.acc_pass_list li {
  position: relative;
  margin-bottom: 8px;
  font-size: 0;
  margin: 10px 0;
  width: 380px;
}
.acc_pass_list label {
  width: 100px;
  text-align: right;
  font-size: 14px;
  color: #4d4d4d;
}
.acc_pass_list input {
  width: 252px;
  height: 32px;
  line-height: 30px;
  margin-left: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 14px;
  color: #4d4d4d;
}
.acc_pass_list input::-webkit-input-placeholder {
  color: rgb(187, 182, 182);
}
.acc_pass_list input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: rgb(187, 182, 182);
}
.acc_pass_list input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: rgb(187, 182, 182);
}
.acc_pass_list input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgb(187, 182, 182);
}

.acc_pass_list .visible_icon {
  position: absolute;
  right: 25px;
  top: 8px;
  font-size: 16px;
  color: #999;
  cursor: pointer;
}
.acc_pass_list .visible_icon .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.4em;
  fill: currentColor;
  position: relative;
}
.acc_pass_list .confirm_disable {
  cursor: default;
  width: 80px;
  height: 36px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
  margin-top: 9%;
}
</style>